<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 视频生成器</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">AI 视频生成器</h1>
        <div class="card">
            <div class="card-body">
                <form id="generateForm">
                    <div class="mb-3">
                        <label for="textInput" class="form-label">输入文本</label>
                        <textarea class="form-control" id="textInput" rows="5" placeholder="请输入要转换为语音的文本..." required></textarea>
                    </div>
                    
                    <div class="voice-options">
                        <div class="mb-3">
                            <label for="voiceSelect" class="form-label">选择语音</label>
                            <select class="form-select" id="voiceSelect" required></select>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">生成视频</button>
                </form>
                
                <div id="loading" class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p>正在生成视频，请稍候...</p>
                </div>
            </div>
        </div>
        
        <div id="videoContainer" class="card">
            <div class="card-body">
                <h5 class="card-title">生成结果</h5>
                <video id="resultVideo" controls width="100%"></video>
                <div class="mt-3">
                    <a id="downloadBtn" class="btn btn-success" download>下载视频</a>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const voiceList = [
            { name: "zh-CN-XiaoxiaoNeural", label: "Xiaoxiao - 女声 - 温暖" },
            { name: "zh-CN-XiaoyiNeural",   label: "Xiaoyi - 女声 - 活泼" },
            { name: "zh-CN-YunjianNeural",  label: "Yunjian - 男声 - 激情" },
            { name: "zh-CN-YunxiNeural",    label: "Yunxi - 男声 - 阳光" },
            { name: "zh-CN-YunxiaNeural",   label: "Yunxia - 男声 - 可爱" },
            { name: "zh-CN-YunyangNeural",  label: "Yunyang - 男声 - 专业" },
            { name: "zh-CN-liaoning-XiaobeiNeural", label: "Xiaobei - 女声 - 辽宁方言 - 幽默" },
            { name: "zh-CN-shaanxi-XiaoniNeural",   label: "Xiaoni  - 女声 - 陕西方言 - 明亮" },
            { name: "zh-HK-HiuGaaiNeural",  label: "Hiu Gaai - 女声 - 粤语" },
            { name: "zh-HK-HiuMaanNeural",  label: "Hiu Maan - 女声 - 粤语" },
            { name: "zh-HK-WanLungNeural",  label: "Wan Lung - 男声 - 粤语" },
            { name: "zh-TW-HsiaoChenNeural",label: "Hsiao Chen - 女声 - 国语" },
            { name: "zh-TW-HsiaoYuNeural",  label: "Hsiao Yu  - 女声 - 国语" },
            { name: "zh-TW-YunJheNeural",   label: "Yun Jhe  - 男声 - 国语" },
            { name: "zu-ZA-ThandoNeural",   label: "Thando - 女声 - 祖鲁语" },
            { name: "zu-ZA-ThembaNeural",   label: "Themba - 男声 - 祖鲁语" },
        ];
        document.addEventListener("DOMContentLoaded", () => {
            const select = document.getElementById("voiceSelect");
            voiceList.forEach(v => {
                const opt = document.createElement("option");
                opt.value = v.name;
                opt.textContent = v.label;
                select.appendChild(opt);
            });
        });

        document.getElementById('generateForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const text = document.getElementById('textInput').value;
            const voice = document.getElementById('voiceSelect').value;

            // 显示加载状态
            document.getElementById('loading').style.display = 'block';
            document.getElementById('videoContainer').style.display = 'none';
            
            try {
                const response = await fetch('/generate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        text: text,
                        voice: voice
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    const videoElement = document.getElementById('resultVideo');
                    videoElement.src = data.video_url;
                    
                    const downloadBtn = document.getElementById('downloadBtn');
                    downloadBtn.href = data.video_url;
                    downloadBtn.download = `ai-video-${new Date().toISOString().slice(0,10)}.mp4`;
                    
                    document.getElementById('videoContainer').style.display = 'block';
                } else {
                    alert('生成视频失败: ' + data.error);
                }
            } catch (error) {
                alert('请求失败: ' + error.message);
            } finally {
                document.getElementById('loading').style.display = 'none';
            }
        });
    </script>
</body>
</html>